<template>
  <svg 
    :class="['svg-icon', `svg-icon-${size}`, { 'svg-icon-clickable': clickable }]"
    :style="{ color: color, width: customSize, height: customSize }"
    @click="handleClick"
  >
    <use :href="`#${name}`" />
  </svg>
</template>

<script lang="ts" setup>
import { computed } from 'vue'

interface Props {
  name: string
  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
  color?: string
  customSize?: string
  clickable?: boolean
}

interface Emits {
  (e: 'click', event: MouseEvent): void
}

const props = withDefaults(defineProps<Props>(), {
  size: 'md',
  color: 'currentColor',
  clickable: false
})

const emit = defineEmits<Emits>()

const handleClick = (event: MouseEvent) => {
  if (props.clickable) {
    emit('click', event)
  }
}
</script>

<style scoped>
.svg-icon {
  display: inline-block;
  vertical-align: middle;
  fill: currentColor;
  transition: all 0.3s ease;
}

.svg-icon-xs {
  width: 12px;
  height: 12px;
}

.svg-icon-sm {
  width: 16px;
  height: 16px;
}

.svg-icon-md {
  width: 20px;
  height: 20px;
}

.svg-icon-lg {
  width: 24px;
  height: 24px;
}

.svg-icon-xl {
  width: 32px;
  height: 32px;
}

.svg-icon-clickable {
  cursor: pointer;
}

.svg-icon-clickable:hover {
  transform: scale(1.1);
  opacity: 0.8;
}
</style>
